<template>
  <view class="content">
    <view class="headerBox" :style="'padding-top:' + statusBarHeight + 'px;'">
      <view class="headerInput">
        <view @tap="chooseAddr" style="width: 50px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
          <text class="address">{{ address }}</text>
          <image style="height:24rpx; width:12rpx; margin-left:8rpx;vertical-align: middle;"
            src="../../static/image/delivery/arrowhead1.png" alt="" />
        </view>
        <view @tap="goMaintainSearchtwo" class="searchBox">
          <u-search :disabled="true" style="flex: 1;" v-model="searchValue" placeholder="请输入搜索内容" :show-action="false"
            :height="66" class="searchInput" input-align="left"></u-search>
          <button type="button" class="search">搜索</button>
        </view>
      </view>
    </view>
    <view class="BoxFy">
      <view class="classifyBox">
        <view class="classItem" v-for="(item, index) in list" :key="index" @tap="goMaintainSearch(item)">
          <view class="ItemDiv">
            <view class="itemImg">
              <image class="classImg" :src="item.merchantSmallImg"></image>
            </view>
            <view style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
              {{ item.merchantSmallName }}
            </view>
          </view>
        </view>
      </view>
    </view>
    <view @tap="goDetect" class="Appliance">
      <image style="width: 100%; height:100%;" src="../../static/image/pagesMaintain/look.png" mode="scaleToFill" />
    </view>
    <view  class="DoorRepairs" v-for="(item, index) in doorList" :key="index"  @tap="gotodel(item)">
      <view class="DoorBox">
        <view class="DoorTop">
          <view class="DoorLeft">
            <view class="Door" style="width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
              {{ item.merchantName }}
            </view>
            <view class="AllCity">
              全国覆盖，急速上门
            </view>
          </view>
          <view class="DoorRight">
            <view class="allMany">
              更多
            </view>
            <view class="gt">
              &gt;
            </view>
          </view>
        </view>
        <view class="DoorBottom">
          <view class="Doors" v-for="(childs, childIndex) in item.appProducts" :key="childIndex">
            <view style="position:relative; width:190rpx; height:144rpx;">
              <view class="DoorsImg"><image :src="childs.productImg" mode="widthFix"></image></view>
              <view v-if="item.businessStatus == 1 || item.isInOpenTime == 0"
                style="width:100%; height:30%;position:absolute;bottom:0;left:0;text-align:center;color:white;background-color:rgba(0,0,0,0.4);">
                已打烊
              </view>
            </view>

            <view class="titles">
              {{ childs.productName }}
            </view>
            <view class="price">
              ￥{{ (childs.appProductComponent.productComponentPrice) / 100 }}起
            </view>
          </view>
        </view>
      </view>

    </view>

  </view>
</template>

<script>
import { selectLabelList, selectjdwxMerchantList } from '@/api/common'
let that = this
export default {
  data() {
    return {
      statusBarHeight: 0, // 系统导航栏
      list: [],
      doorList: [],
      address: '',
      fValue: [],
      pageNum: 1,
      pageSize: 10,
      pagesStatus: false,
      latAndLong: {},
      searchValue: '',
      consigneeLng: '',
      consigneeLat: ''
    }
  },
  onReady() {
  },
  onLoad() {
    that = this
    that.statusBarHeight = uni.getStorageSync('statusBarHeight')
    that.latAndLong = uni.getStorageSync('latAndLong')
    let nowAddress = uni.getStorageSync('address')
    this.address = nowAddress.district
    this.consigneeLng = that.latAndLong.longitude
    this.consigneeLat = that.latAndLong.latitude
    console.log('看看这个经纬度', this.latAndLong)
    console.log('导航栏高度:', this.statusBarHeight)
  },
  onShow() {
    this.getmaintainlist()
    let nowAddress = uni.getStorageSync('address')
    console.log('当前地址onshow', nowAddress)
    that.address = nowAddress.district
    that.latAndLong = uni.getStorageSync('latAndLong')
    console.log('当前经纬度', that.latAndLong)
    that.consigneeLng = that.latAndLong.longitude
    that.consigneeLat = that.latAndLong.latitude
    this.pageNum = 1
    this.pagesStatus = false
  },

  methods: {
    getmainlist() {
      let obj = {
        merchantTakeout: 4,
        lng: this.consigneeLng,
        lat: this.consigneeLat,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      }
      selectjdwxMerchantList(obj).then(res => {
        console.log('维修列表', res.data)
        if (this.pageNum === 1) {
          this.doorList = res.data
        } else {
          this.doorList = this.doorList.concat(res.data)
        }
        if (res.data.length < 10) {
          this.pagesStatus = false
        } else {
          this.pagesStatus = true
        }
      })
    },
    getmaintainlist() {
      let obj = {
        merchantTakeout: 4,
      }
      selectLabelList(obj).then(res => {
        console.log('看看维修页面', res)
        this.list = res.data
        this.getmainlist()
      })
    },
    goMaintainSearch(e) {
      console.log('看看e', e)
      uni.navigateTo({
        url: '/pagesDelivery/deliverySearchResult?latAndLong=' + JSON.stringify(this.latAndLong) + '&tabbarId=' + e.merchantTypeId + '&merchantTakeout=4'
      })
    },
    goMaintainSearchtwo() {
      uni.navigateTo({
        url: '/pagesDelivery/deliverySearch?latAndLong=' + JSON.stringify(that.latAndLong) + '&merchantTakeout=4'
      })
    },
    gotodel(item) {
      console.log('看看我的item', item)
      uni.navigateTo({
        url: '/pagesMaintain/maintainDetail?id=' + item.merchantId + '&distance=' + item.distance
      })
    },
    chooseAddr() {
      that = this
      // 获取地理位置
      // uni.getLocation({
      //   type: 'gcj02',
      //   success: function (res) {
      //     let obj = {
      //       latitude: res.latitude,
      //       longitude: res.longitude,
      //     }
      //     uni.setStorageSync('latAndLong', obj)
      //     uni.setStorageSync('address', res.address)
      //     console.log('获取地理位置', res)
      //     this.address = res.address.district
      //     this.consigneeLng = res.longitude
      //     this.consigneeLat = res.latitude
      //   }
      // });
      uni.$once("nextStep", function (e) {
        console.log('看看信息', e)
        that.consigneeLng = e[0].consigneeLng
        console.log('看看经度', that.consigneeLng)
        that.consigneeLat = e[0].consigneeLat
        console.log('看看维度', that.consigneeLat)
        that.address = e[0].consigneeAddress
        console.log('看看地址', that.address)
        let obj = uni.getStorageSync('address')
        let onjand = uni.getStorageSync('latAndLong')
        onjand.longitude = that.consigneeLng
        onjand.latitude = that.consigneeLat
        obj.district = that.address
        uni.setStorageSync('address', obj)
        uni.setStorageSync('latAndLong', onjand)
        that.pageNum = 1
        that.pagesStatus = false
        that.gitWaterfall()
      });
      uni.navigateTo({
        url: '/pagesMine/mineAddress'
      })
    },
    goDetect() {
      console.log('111111111')
      uni.navigateTo({
        url: '/pagesMaintain/maintainDetect'
      })
    }

  },
  onReachBottom() {
    console.log("触底");
    // 模拟的请求数据
    if (this.pagesStatus) {
      this.pageNum++
      this.getmainlist()
    }
  },
}
</script>

<style scoped lang="scss">
.content {
  background-color: #F5F5F5;
  min-height: 100vh;

  .headerBox {
    padding: 40rpx 32rpx 0rpx 32rpx;

    .headerInput {
      display: flex;
      align-items: center;
      justify-content: center;

      .address {
        font-family: PingFang SC, PingFang SC;
        font-size: 28rpx;
        font-style: normal;
        font-weight: 400;
      }

      .searchBox {
        flex: 1;
        margin-left: 24rpx;
        background: white;
        display: flex;
        align-items: center;
        border-radius: 84rpx;

        .search {
          width: 120rpx;
          height: 56rpx;
          border: none;
          outline: none;
          text-align: center;
          line-height: 56rpx;
          font-size: 28rpx;
          background-color: #D12C25;
          color: white;
          border-radius: 28rpx;
          margin: 0 8rpx;
        }
      }

      ::v-deep .searchInput .u-content {
        background-color: white !important;
        padding-right: 0 !important;
      }

      ::v-deep .searchInput .u-input {
        background-color: white !important;
      }

    }
  }

  .BoxFy {
    padding: 16rpx 32rpx;

    .classifyBox {
      margin-top: 10rpx;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      align-items: center;
      padding: 16rpx 12rpx 40rpx;
      width: 100%;
      background-color: #FFFFFF;
      border-radius: 8rpx;

      .classItem {
        width: 25%;
        margin-top: 24rpx;

        .ItemDiv {
          text-align: center;

          image {
            width: 112rpx;
            height: 76rpx;
          }
        }

      }
    }
  }

  .Appliance {
    margin-left: 32rpx;
    width: 686rpx;
    height: 178rpx;
  }

  .DoorRepairs {
    padding: 16rpx 32rpx;

    .DoorBox {
      background-color: #fff;
      padding: 0 25rpx;
      border-radius: 8rpx;

      .DoorTop {
        height: 92rpx;
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        border-bottom: solid 1rpx #E7E7E7;

        .DoorLeft {
          height: 100%;
          display: flex;
          align-items: baseline;
          padding: 24rpx;

          .Door {
            font-size: 32rpx;
            font-weight: bold;
            font-family: PingFang SC-Bold;
            margin-right: 18rpx;
            margin-left: -20rpx;
          }

          .AllCity {
            color: #999999;
            font-size: 28rpx;
          }
        }

        .DoorRight {
          display: flex;
          align-items: center;

          .allMany {
            color: #999999;
            font-size: 28rpx;
            // line-height: 32.81rpx;
            margin-right: 8rpx;
          }

          .gt {
            color: #A1A2B2;
          }
        }
      }

      .DoorBottom {
        display: flex;

        margin-top: 24rpx;
        overflow-x: auto;
        /* 或 overflow-x: scroll; */
        white-space: nowrap;

        .Doors {
          /* 每个项目的最小宽度 */
          margin-right: 10px;
          
          .DoorsImg {
            width: 190rpx;
            height: 144rpx;
            border-radius: 12rpx 12rpx 12rpx 12rpx;
            overflow: hidden;

            image {
            width: 100%;
            min-height: 144rpx;
            border-radius: 12rpx 12rpx 12rpx 12rpx;
          }
          }

          .titles {
			      width: 190rpx;
            margin-top: 24rpx;
            font-size: 28rpx;
            font-family: PingFang SC-Regular;
            line-height: 32.81rpx;
			      text-overflow: ellipsis;
			      overflow: hidden;
			      white-space: nowrap;
            }
          .price {
            color: #D12C25;
            margin-top: 18rpx;
            font-size: 28rpx;
            line-height: 28.13rpx;
            padding-bottom: 24rpx;
          }
        }
      }
      .DoorBottom::-webkit-scrollbar {
        display: none;
      }
    }

  }

}
</style>
